<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绑定手机号</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">
    <link href="css/login.css" rel="stylesheet" />
    <style>

    </style>
</head>
<body>
<div id="app">
    <div class="app-container">
        <div class="view-container">
            <div class="form-container">
                <div class="logo-container"><i class="logo"></i><span class="logo-desc">缤纷福利&nbsp;精彩分呈</span></div>
                <ul class="login-form">
                    <li>
                        <input type="number" id="phoneNum" value="" placeholder="请输入手机号">
                        <button class="vcode-btn" id="codeBtn">获取验证码</button>
                    </li>
                    <li><input type="text" id="smsCode" value="" placeholder="请输入验证码"></li>

                </ul>
                <button class="btn-lg" onclick="getBinding()">绑&nbsp;定</button>

            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/common.js"></script>
<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>

<script type="application/javascript">
    var countdown;
    var openid;
    function settime(me,tm) {
        if (countdown == 0) {
            $(me).removeAttr("disabled");
            $(me).text("获取验证码");
            $(me).removeClass("grey");
            countdown = 60;
            window.sessionStorage.setItem("countdown","0");
            clearInterval(tm);
        } else {
            $(me).attr("disabled","disabled");
            $(me).addClass("grey");
            $(me).text(countdown+" s");
            countdown--;
            window.sessionStorage.setItem("countdown",countdown+"");
        }

    }
    $("#codeBtn").click(function(){
        //检查手机号是否合法
        var phoneNum = $("#phoneNum").val();
        if(!Common.isPhoneNumber(phoneNum)){
            layer.msg("请输入正确的手机号！");
            return;
        }
        //后台请求验证码
        var paramStr = {};
        paramStr.phoneNum =phoneNum;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);

        Common.ajaxWithParam("/fenful/api/v1/sms/bindPhoneSms", params, function(data) {
            layer.msg("验证码发送成功！");
            var time = setInterval(function() {
                settime($("#codeBtn"),time)
            },1000);
        });
    });

    //绑定手机号，如果手机号已存在，openid不一样，则报错。
    function getBinding(){
        //检查手机号是否合法
        var phoneNum = $("#phoneNum").val();
        if(!Common.isPhoneNumber(phoneNum)){
            layer.msg("请输入正确的手机号！");
            return;
        }
        var smsCode = $("#smsCode").val();
        if(!smsCode){
            layer.msg("请输入验证码！");
            return;
        }
        var paramStr = {};
        paramStr.phoneNum = phoneNum;
        paramStr.verifyCode = smsCode;
        paramStr.wxOpenId = openid;

        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/login/bindPhone", params, function(data) {
           layer.msg("绑定成功");
            window.location.href = "myAccount.html";
        });
    }

    function getopenid() {
        openid = window.localStorage.getItem("openid");
        if(openid == null || openid == undefined || openid == '') {
            getCode();
        }
    }

    function getCode() {
        var code = Common.queryGetParam('code');
        if(code == null || code == undefined || code == '') {
            location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx95bdc635798fcfe4&redirect_uri="+window.location.href+"&response_type=code&scope=snsapi_base#wechat_redirect";
            return;
        }
        var paramStr = {};
        paramStr.code = code;
        var params = {};
        params.paramStr = JSON.stringify(paramStr);
        Common.ajaxWithParam("/fenful/api/v1/common/getWxUserOpenId", params, function(data) {
            //console.log(data);
            openid = data.openid;
            window.localStorage.setItem("openid", data.openid);
        },false);
    }

    $(function () {
        countdown =parseInt(window.sessionStorage.getItem("countdown"))||0;
        var time = setInterval(function() {
            settime($("#codeBtn"),time)
        },1000);
        getopenid();
    });

</script>
</body>
</html>